<template>
  <c-back-wrap :loading="loading" go-page="经销商档案变更管理" current-page="详情">
    <c-title title="客户基本信息">
      <CustomerBaseInfoView :detail="detail" />
    </c-title>
    <c-title title="变更内容">
      <ChangeWrap disabled :value="isChangeAddr" :show-add-btn="false" change-label="客户收货地址变更" change-before-label="变更前收货地址" change-after-label="变更后收货地址">
        <ChangeAddr slot="before" :table-data="addressBeforeTableData" is-before type="view" />
        <ChangeAddr ref="form1" slot="after" :table-data="addressAfterTableData" type="view" />
      </ChangeWrap>

      <ChangeWrap disabled :value="isChangeContact" :show-add-btn="false" change-label="客户联系人变更" change-before-label="变更前客户联系人" change-after-label="变更后客户联系人">
        <ChangeContacts slot="before" :table-data="contactsBeforeTableData" is-before type="view" />
        <ChangeContacts ref="form2" slot="after" :table-data="contactsAfterTableData" type="view" />
      </ChangeWrap>
      <div class="shop">
        <QupList :column="3" sep="：" default-value="" label-position="right" label-width="160">
          <QupListItem label="门店名称" :value="shopName" />
          <QupListItem label="门店编码" :value="shopCode" />
        </QupList>
      </div>

      <ChangeWrap disabled :value="isShopBaseInfo" :show-add-btn="false" change-label="门店基本信息变更">
        <ChangeShop ref="form3" slot="after" :data="shopDTOS" :shop-data="shopData" disabled :editable="false" />
      </ChangeWrap>

      <ChangeWrap disabled :value="isShopChangeContact" :show-add-btn="false" change-label="门店联系人变更" change-before-label="变更前门店联系人" change-after-label="变更后门店联系人">
        <ChangeContacts slot="before" :table-data="shopContactsBeforeTableData" is-before type="view" />
        <ChangeContacts ref="form4" slot="after" :table-data="shopContactsAfterTableData" type="view" />
      </ChangeWrap>
    </c-title>

    <c-title title="流程审批信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="变更进度" :value="detail.schedule" dict-type-code="CTM_CUS_ARCHIVE_CHANGE_PROGRESS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem :value="detail.createTime" label="申请时间" />
        <QupListItem :value="detail.applyNo" label="BPM单号" />
        <!-- <QupListItem label="档案科审核结果" :value="detail.fileReviewResult" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
        <!-- <QupListItem :value="detail.fileReviewTime" label="档案科审核时间" /> -->
        <!-- <QupListItem :value="detail.fileReviewAdvice" label="档案科审核意见" :span="24" /> -->
        <!-- <QupListItem :value="detail.authorityReviewTime" label="系统权限处理审核时间" /> -->
        <!-- <QupListItem :value="detail.authorityReviewAdvice" label="系统权限处理审核意见" :span="24" /> -->
      </QupList>
      <Options :data="detail.opinionDTOS" />
    </c-title>
    <div class="btn-center">
      <c-button type="primary" @click="handleGoBack">返回</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { archiveDetail, getShopData } from '@/api/channelTask2/archiveChange'
import { customerAddress, contactByCustomer, contactByShop } from '@/api/channelTask2/change'
import CustomerBaseInfoView from '../../components/CustomerBaseInfoView'
import ChangeWrap from './ChangeWrap'

import ChangeAddr from './ChangeAddr'
import ChangeContacts from './ChangeContacts'
import ChangeShop from './ChangeShop'
import Options from '../../components/Options'

export default {
  name: 'Detail',
  components: {
    CustomerBaseInfoView,
    ChangeAddr,
    ChangeContacts,
    ChangeShop,
    ChangeWrap,
    Options
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      // 收货地址变更
      isChangeAddr: 0,
      // 客户收货地址
      addressBeforeTableData: [],
      addressAfterTableData: [],
      // 收货地址
      addressTableData: [],
      // 客户联系人变更
      isChangeContact: 0,
      contactsTableData: [],
      contactsBeforeTableData: [],
      contactsAfterTableData: [],
      // 门店基本信息
      isShopBaseInfo: 0,
      shopChangeData: [],
      shopData: {},
      // 门店联系人变更
      isShopChangeContact: 0,
      shopContactsTableData: [],
      shopContactsBeforeTableData: [],
      shopContactsAfterTableData: [],
      shopCode: '',
      shopName: ''
    }
  },
  computed: {
    isEdit() {
      return !!this.id
    },

    // 门店
    shopDTOS() {
      return this.detail.shopDTOS || []
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      this.loading = true
      return archiveDetail(this.id).then(res => {
        this.detail = res.data
        this.initData()
      }).finally(() => {
        this.loading = false
      })
    },
    async initData() {
      const isChange = d => {
        return (d || []).length > 0 ? 1 : 0
      }
      // 处理数据
      const handle = (before, after, key) => {
        before.forEach(e => {
          if (after.some(ee => ee[key] === e[key])) {
            e.isChange = 1
          }
        })
      }
      // 客戶收货地址
      this.addressTableData = this.detail.addressDTOS || []
      this.addressBeforeTableData = this.addressTableData.filter(e => [1, '1'].includes(e.isBefore))
      this.addressAfterTableData = this.addressTableData.filter(e => ![1, '1'].includes(e.isBefore))
      handle(this.addressBeforeTableData, this.addressAfterTableData, 'code')
      this.isChangeAddr = isChange(this.addressAfterTableData)
      // 客户联系人
      this.contactsTableData = (this.detail.contactDTOS || []).filter(e => [1, '1'].includes(e.contactScope) || !!e.customerCode)
      this.contactsBeforeTableData = this.contactsTableData.filter(e => [1, '1'].includes(e.isBefore))
      this.contactsAfterTableData = this.contactsTableData.filter(e => ![1, '1'].includes(e.isBefore))
      handle(this.contactsBeforeTableData, this.contactsAfterTableData, 'contactId')
      this.isChangeContact = isChange(this.contactsAfterTableData)
      // 门店联系人
      this.shopContactsTableData = (this.detail.contactDTOS || []).filter(e => [3, '3'].includes(e.contactScope) || !!e.shopCode)
      this.shopContactsBeforeTableData = this.shopContactsTableData.filter(e => [1, '1'].includes(e.isBefore))
      this.shopContactsAfterTableData = this.shopContactsTableData.filter(e => ![1, '1'].includes(e.isBefore))
      handle(this.shopContactsBeforeTableData, this.shopContactsAfterTableData, 'contactId')
      this.isShopChangeContact = isChange(this.shopContactsAfterTableData)

      // 门店
      if (this.detail.shopDTOS.length > 0) {
        const t = this.detail.shopDTOS[0]
        this.shopData = await getShopData(this.detail.customerCode, t.code)
        this.shopCode = this.shopData.code
        this.shopName = this.shopData.name
      } else if (this.detail.contactDTOS.length > 0) {
        const t = this.detail.contactDTOS[0]
        this.shopData = await getShopData(this.detail.customerCode, t.shopCode)
        this.shopCode = this.shopData.code
        this.shopName = this.shopData.name
      }

      // 基础信息
      this.shopChangeData = this.detail.shopDTOS
      this.isShopBaseInfo = this.shopChangeData.length > 0 ? 1 : 0
    },
    handleGoBack() {
      this.$pageStack.pop()
    }
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding-top: 20px;
}
</style>
